<template>
  <el-upload
    ref="upload"
    :accept="picTypeList"
    :limit="1"
    :headers="upload.headers"
    :action="upload.url + '?updateSupport=' + upload.updateSupport"
    :disabled="upload.isUploading"
    :before-upload="beforeUploadImage"
    :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess"
    :auto-upload="true"
    :show-file-list="false"
  >
    <img class="pageleftpic" src="@/assets/images/图层 947.png" />
  </el-upload>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "UserUpload",
  data() {
    return {
      picTypeValidateList: [], //校验图片格式
      picTypeList: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
      },
    };
  },
  props: ["uncheckedInformationindex"],
  created() {
    let labelList = [];
    this.getDicts("pic_type").then((response) => {   
      response.data.forEach((el) => {
        labelList.push(el.dictLabel);
      });
      console.log(labelList);
      this.picTypeValidateList = labelList;
      this.picTypeList = labelList.join();
      console.log(this.picTypeList);
    });
  },
  methods: {
    //  限制上传图片格式
    beforeUploadImage(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf("."));

      if (this.picTypeValidateList.indexOf(testmsg) == -1) {
        this.$message({
          message: "上传文件只能是" + this.picTypeList + "格式!",
          type: "warning",
        });
        return false;
      } else {
        return true;
      }
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$emit("uploadDisplay", response, this.uncheckedInformationindex);
    },
  },
};
</script>
<style scoped lang="scss">
.pageleftpic {
  margin-left: 10px;
}
</style>
